<script setup lang='ts'>
import { LoginAPI } from '@/apis/login';
import router from '@/router';
import { userPinna } from '@/store/user';
import type { LoginBody } from '@/types/login';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { ref } from 'vue';

const store= userPinna()
const body=ref<LoginBody>({
  mobile:'13200000000',
  code:'246810'
})
const rules=ref<FormRules<LoginBody>>({
  mobile:[{required:true,message:'请输入手机号',trigger:'blur'}],
  code:[{required:true,message:'请输入验证码',trigger:'blur'}]
})
const formRef=ref<FormInstance>()
const onSubmit=()=>{
 formRef.value?.validate(async(val)=>{
 if(val){
  try{
    const res=await LoginAPI(body.value)
    await store.setToken(res.data.token)
    router.push('/')
    ElMessage.success('登录成功')
  }catch(err){
    store.clearToken()
    ElMessage.error('账号或者密码错误')
    console.log(err);
  }
 }
 })
}
</script>
<template>
  <el-container>
    <el-card>
        <div class="cart-logo">
          <img src="@/assets/images/logo.png" alt="" class="logo">
        </div>
        <el-form :model="body" :rules="rules" ref="formRef">
          <el-form-item label="" prop="mobile">
            <el-input placeholder="手机号：" v-model="body.mobile"></el-input>
          </el-form-item>
          <el-form-item label="" prop="code">
            <el-input placeholder="验证码：" v-model="body.code"></el-input>
          </el-form-item>
          <el-form-item label="" prop="">
            <el-checkbox>我已阅读并同意「用户协议」和「隐私条款」</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" style="width: 100%;">登录</el-button>
          </el-form-item>
        </el-form>
    </el-card>
  </el-container>
</template>
<style scoped>
.el-container {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("@/assets/images/login.png");
}
.logo{
  width: 200px;
}
.el-card{
  width: 400px;
  height: 320px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.cart-logo{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
</style>